<template>
<div class="container">
    <h1>二维码举报</h1>
    <div class="body-box">
        <div class="ORPic">
            <div class="or-title">二维码举报图片：</div>
            <div class="or-pic">
                <img :src="baseUrl+pic" alt />
                <span>图片大小为920*460px；</span>
            </div>
            <div class="bt-bianji">
                <el-upload class="upload-demo" action multiple :limit="3" :file-list="fileList" :show-file-list="false" :on-change="handleChange">
                    <el-button size="small" type="primary">编辑</el-button>
                </el-upload>
            </div>
        </div>
        <!--文本编辑器区域开始-->
        <div class="text-editor-box">
            <h1 class="h1-2">内容：</h1>
            <quill-editor v-model="Text" ref="QuillEditor" :options="editorOption" />
            <div class="bt-group">
                <el-button type="preview" @click="Save">编辑</el-button>
            </div>
        </div>
        <!--文本编辑器区域结束-->
    </div>
    <el-dialog title="上传图片" :visible.sync="dialogVisible" width="25%">
        <div class="upload-title">请选择你要上传的图片</div>
        <Upload v-if="dialogVisible" :ruleForm.sync="uploadRuleForm"></Upload>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
import Upload from "@/components/Upload/Upload.vue";
export default {
    components: {
        Upload,
    },
    data() {
        const _this = this;
        const toolbarOptions = [
            ["bold", "italic", "underline", "strike"], // toggled buttons
            ["blockquote", "code-block"],

            [{
                    header: 1,
                },
                {
                    header: 2,
                },
            ], // custom button values
            [{
                    list: "ordered",
                },
                {
                    list: "bullet",
                },
            ],
            [{
                    script: "sub",
                },
                {
                    script: "super",
                },
            ], // superscript/subscript
            [{
                    indent: "-1",
                },
                {
                    indent: "+1",
                },
            ], // outdent/indent
            [{
                direction: "rtl",
            }, ], // text direction

            [{
                size: ["small", false, "large", "huge"],
            }, ], // custom dropdown
            [{
                header: [1, 2, 3, 4, 5, 6, false],
            }, ],

            [{
                    color: [],
                },
                {
                    background: [],
                },
            ], // dropdown with defaults from theme
            [{
                font: [],
            }, ],
            [{
                align: [],
            }, ],
            ["link", "image", "video"],
            ["clean"], // remove formatting button
        ];
        return {
            fileList: [],
            Picbox: {},
            pic: "",
            Text: "",
            //富文本
            activeHtmlName: "pc",
            length: null,
            dialogVisible: false,
            uploadRuleForm: {},
            editorOption: {
                modules: {
                    toolbar: {
                        container: toolbarOptions, // 工具栏
                        handlers: {
                            image: function (value) {
                                if (value) {
                                    _this.dialogVisible = true;
                                    let quill = _this.$refs.QuillEditor.quill;
                                    _this.length = quill.getSelection().index;
                                    // alert("自定义图片");
                                } else {
                                    this.quill.format("image", false);
                                }
                            },
                        },
                    },
                },
            },
        };
    },
    created() {
        this.get();
    },
    computed: {

        //图片获取根路径
        baseUrl() {
            return this.$store.state.PortalManagement.fileIp;
        },
    },
    watch: {
        uploadRuleForm(n) {
            this.handleSuccess(this.baseUrl + n.pic);
        },
    },
    methods: {
        //图片上传时触发
        handleSuccess(res) {
            this.dialogVisible = false;
            console.log(res, "res11111");
            // 获取富文本组件实例
            let quill = this.$refs.QuillEditor.quill;
            console.log(quill, "quill");
            console.log(quill.getSelection(), "getSelection");
            // 如果上传成功
            if (res) {
                // 获取光标所在位置
                let length = this.length;
                // 插入图片，res为服务器返回的图片链接地址
                quill.insertEmbed(length, "image", res);
                // 调整光标到最后
                quill.setSelection(length + 1);
                // console.log(this.ruleForm.context, "context")
            } else {
                // 提示信息，需引入Message
                Message.error("图片插入失败");
            }
        },
        get() {
            this.Api.getReportAll().then((res) => {
                this.pic = res.data.qrcodeBgpic;
                this.Text = res.data.qrcodeNote
                // console.log(res.data, "1111111111111111111")
            });
        },
        //图片上传的方法
        handleChange(file, fileList) {
            const isLt2M = file.size / 1200 / 1024 < 10;
            var FileExt = file.name.replace(/.+\./, "");
            if (!isLt2M) {
                this.$message.error("上传头像图片大小需小于10MB");
                this.fileList = []

            } else if (["jpg", "png", "jpeg"].indexOf(FileExt.toLowerCase()) === -1) {
                this.$message.error("请上传后缀名为jpg、png、jpeg的图片！");
                this.fileList = []
            } else {
                // console.log(file, fileList);
                const formData = new FormData();
                //在file里面追加一个对象
                formData.append("file", file.raw);
                // console.log(formData,111)
                this.Api.uploadImage(formData).then((res) => {
                    // var data = { ...this.ruleForm, picUrl: res.data.url };
                    // console.log(data, 111);
                    // this.$emit("update:ruleForm", data);
                    // console.log(res, 1111);
                    // this.picSpace1 = res.data.url;
                    //保存的图片地址
                    this.pic = res.data.url;
                });
            }

        },
        Save() {
            this.Api.BlobBuilder({
                qrcodeBgpic: this.pic,
                qrcodeNote: this.Text,
            }).then((res) => {
                if (res.code === "0") {
                    return this.$message.success("编辑成功");
                } else {
                    return this.$message.success("编辑失败");
                }
            });
        },
    },
};
</script>

<style lang="less" scoped>
.container {
    >h1 {
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        padding-bottom: 20px;
        border-bottom: 1px solid #e4e7ed;
        margin-bottom: 17px;
    }

    .body-box {
        padding-left: 20px;

        .ORPic {
            display: flex;
            margin-bottom: 39px;

            .or-title {
                width: 119px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                line-height: 22px;
            }

            .or-pic {
                display: flex;
                flex-direction: column;

                >img {
                    width: 431px;
                    height: 300px;
                }

                >span {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(153, 153, 153, 1);
                    line-height: 28px;
                }
            }

            .bt-bianji {
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                padding-bottom: 28px;
                padding-left: 21px;

                /deep/.el-button--bianji {
                    width: 60px;
                    height: 28px;
                    background: rgba(61, 127, 255, 1);
                    border-radius: 4px;
                    color: white;
                    padding: 0;
                    margin-right: 20px !important;
                }
            }
        }
    }
}

// 富文本编辑器
.text-editor-box {
    display: flex;

    .h1-2 {
        width: 85px;
        height: 22px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        text-align: right;
    }

    .h1-2::before {
        content: "* ";
        color: #ff0000;
    }

    /deep/.bt-group {
        display: flex;
        align-items: flex-end;
        position: relative;

        .el-button--preview {
            width: 60px;
            height: 28px;
            background: rgba(61, 127, 255, 1);
            border-radius: 4px;
            color: white;
            padding: 0;
            margin-left: 10px;
            position: absolute;
            bottom: -140px;
        }
    }

    .quill-editor {
        /deep/.ql-container {
            min-height: 20vh;
            height: 310px;
        }
    }
}

/deep/.quill-editor {
    width: 1350px;
    height: 200px;

    .ql-blank {
        padding-left: 0px;
    }

    .ql-containe {
        height: 158px;
    }
}

/deep/.el-button--small {
    width: 60px;
    height: 28px;
    background: rgba(61, 127, 255, 1);
    border-radius: 4px;
    color: white;
    padding: 0;
}

//图片上传的弹窗样式
/deep/.el-dialog__wrapper {
    .el-dialog {
        border-radius: 8px 8px 0px 0px;

        .el-dialog__header {
            padding: 15px 20px 15px 24px;

            background: #E6E9ED;
            border-radius: 8px 8px 0px 0px;
            border: 1px solid #E6E9ED;

            .el-dialog__title {
                font-size: 18px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 600;
                color: #333333;
                line-height: 16px;
            }

            .el-dialog__headerbtn {
                top: 15px;
                right: 15px;
            }
        }

        .el-dialog__body {
            padding: 16px 20px 20px 20px;

            .upload-title {
                width: 140px;
                height: 22px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                line-height: 22px;
                margin-bottom: 17px;

            }

        }

        .el-dialog__footer {
            padding-top: 0;

            .dialog-footer {
                .el-button {
                    padding: 10px 18px;
                }
            }
        }
    }
}
</style>
